<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人资料 | Portfolio</title>
    <link rel="stylesheet" href="style.css">
    <!-- Font Awesome for icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <!-- 主题切换按钮 -->
    <button class="theme-toggle" id="themeToggle" aria-label="切换主题">
        <i class="fas fa-moon"></i>
    </button>

    <!-- 粒子背景画布 -->
    <canvas id="particleCanvas"></canvas>

    <!-- 主容器 -->
    <div class="container">
        <!-- 个人资料卡片 -->
        <div class="profile-card" id="profileCard">
            <!-- 头像区域 -->
            <div class="avatar-container">
                <div class="avatar-glow"></div>
                <svg class="avatar-border" viewBox="0 0 200 200">
                    <defs>
                        <linearGradient id="avatarGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                            <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
                            <stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
                        </linearGradient>
                    </defs>
                    <circle cx="100" cy="100" r="95" fill="none" stroke="url(#avatarGradient)" stroke-width="3" class="avatar-circle"/>
                </svg>
                <!-- 【待填充】替换为你的头像图片 -->
                <img src="https://via.placeholder.com/180" alt="头像" class="avatar" id="avatar">
            </div>

            <!-- 个人信息 -->
            <div class="info-section">
                <!-- 【待填充】你的名字 -->
                <h1 class="name" data-text="你的名字">你的名字</h1>
                
                <!-- 打字机效果的职位/标签 -->
                <div class="typewriter-container">
                    <span class="typewriter-text" id="typewriter"></span>
                    <span class="cursor">|</span>
                </div>

                <!-- 【待填充】个人简介 -->
                <p class="bio">
                    这里填写你的个人简介，可以介绍你的专业领域、兴趣爱好或个人特色。让访客快速了解你是谁。
                </p>

                <!-- 技能标签 -->
                <div class="skills-container">
                    <!-- 【待填充】你的技能标签 -->
                    <span class="skill-tag">JavaScript</span>
                    <span class="skill-tag">React</span>
                    <span class="skill-tag">Node.js</span>
                    <span class="skill-tag">UI/UX</span>
                    <span class="skill-tag">设计</span>
                </div>

                <!-- 联系信息 -->
                <div class="contact-info">
                    <!-- 【待填充】你的邮箱 -->
                    <div class="contact-item">
                        <i class="fas fa-envelope"></i>
                        <span>your.email@example.com</span>
                    </div>
                    <!-- 【待填充】你的电话（可选） -->
                    <div class="contact-item">
                        <i class="fas fa-phone"></i>
                        <span>+86 138 0000 0000</span>
                    </div>
                    <!-- 【待填充】你的位置 -->
                    <div class="contact-item">
                        <i class="fas fa-location-dot"></i>
                        <span>北京，中国</span>
                    </div>
                </div>

                <!-- 社交媒体链接 -->
                <div class="social-links">
                    <!-- 【待填充】你的社交媒体链接 -->
                    <a href="https://github.com/yourusername" target="_blank" class="social-btn github" aria-label="GitHub">
                        <i class="fab fa-github"></i>
                        <span class="ripple"></span>
                    </a>
                    <a href="https://linkedin.com/in/yourusername" target="_blank" class="social-btn linkedin" aria-label="LinkedIn">
                        <i class="fab fa-linkedin-in"></i>
                        <span class="ripple"></span>
                    </a>
                    <a href="https://twitter.com/yourusername" target="_blank" class="social-btn twitter" aria-label="Twitter">
                        <i class="fab fa-twitter"></i>
                        <span class="ripple"></span>
                    </a>
                    <a href="https://weibo.com/yourusername" target="_blank" class="social-btn weibo" aria-label="微博">
                        <i class="fab fa-weibo"></i>
                        <span class="ripple"></span>
                    </a>
                    <a href="mailto:your.email@example.com" class="social-btn email" aria-label="Email">
                        <i class="fas fa-envelope"></i>
                        <span class="ripple"></span>
                    </a>
                </div>

                <!-- 操作按钮 -->
                <div class="action-buttons">
                    <button class="btn btn-primary" id="downloadVCard">
                        <i class="fas fa-download"></i>
                        <span>下载名片</span>
                        <div class="btn-glow"></div>
                    </button>
                    <button class="btn btn-secondary" id="shareCard">
                        <i class="fas fa-share-nodes"></i>
                        <span>分享</span>
                        <div class="btn-glow"></div>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 脚本文件 -->
    <script src="script.js"></script>
</body>
</html>
